Condition-Based Execution

A common problem of UI Automation is that the user interface changes from run to run for some of the following reasons:

• A popup appears randomly
• Elements like buttons have different labels depending on the app state
• ...

In this case, you need to check if an element is visible —or not visible depending on your use case— and change the workflow execution accordingly.

We will show you how to do that with an example.

Check for (Non-) Existence of an Element

On our AskUI Practice Page we have a theme switcher-button. It either has the label Switch to Dark or Switch to Light depending on which theme is enabled:

Check for Existence

To check if the button with the label Switch to Dark is present on the screen you first use get() and then test if the length of the returned array is greater than zero:

const switchToDark = await aui.get()
                              .text('Switch to Dark')
                              .exec();

if (switchToDark.length > 0) {
  // Do something here
}

Check for Non-Existence

To check if the button with the label Switch to Light is not present on the screen you first use get() and then test if the length of the returned array is zero:

const switchToLight = await aui.get()
                               .text('Switch to Light')
                               .exec();
if (switchToLight.length === 0) {
   // Do something here
}

Recommendation

Following the example above you can create a theme switch inside your workflow like this:

const switchToDark =
    await aui.get()
              .text('Switch to Dark')
              .exec();
const switchToLight =
    await aui.get()
              .text('Switch to Light')
              .exec();

if (switchToLight.length > 0) {
  await aui.click()
            .text('Switch to Light')
            .exec();
}
else if (switchToDark.length > 0) {
  await aui.click()
            .text('Switch to Dark')
            .exec();
}

But this will clutter your workflow and make it hard to maintain. It is better to move the code into a separate function which can be called from anywhere. With that you create a modular piece of workflow that can be used anywhere:

async function switchDarkLight() {
  const switchToDark =
      await aui.get()
                .text('Switch to Dark')
                .exec();
  const switchToLight =
      await aui.get()
                .text('Switch to Light')
                .exec();

  if (switchToLight.length > 0) {
    await aui.click()
              .text('Switch to Light')
              .exec();
  }
  else if (switchToDark.length > 0) {
    await aui.click()
              .text('Switch to Dark')
              .exec();
  }
}

// Call it like this from other workflows
await switchDarkLight();